<template>
    <div>
        <van-tabs v-model="active1" line-width=".9375rem" line-height=".125rem" @click="tabs_handle">
            <van-tab title="商家列表"></van-tab>
            <van-tab title="收益列表"></van-tab>
        </van-tabs>
        <div class="list" v-if="active1 == 0">
            <div class="merchant-item" v-for="item in list" :key="item.id" :class="{'active-class':item.active==0}">
                <div class="flex-a-c">
                    <div class="img-div">
                     <img :src="item.change_thumb" />
                    </div>
                    <div style="flex:1;margin-left: .5rem;">
                        <div class="flex-j-sb flex-a-c lh-1">
                            <span class="merchant-item-name">{{ item.store_name }}</span>
                            <span class="create-time">{{ item.created_at }}</span>
                        </div>
                        <div class="address"><i class="iconfont icon-dizhi1"></i>{{ item.full_address }}</div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="flex-a-c flex-j-sa">
                    <div class="flex-column">
                        <span class="price">¥{{ item.today }}</span>
                        <span class="tips">今日</span>
                    </div>
                    <div class="flex-column">
                        <span class="price">¥{{ item.week }}</span>
                        <span class="tips">本周</span>
                    </div>
                    <div class="flex-column">
                        <span class="price">¥{{ item.month }}</span>
                        <span class="tips">本月</span>
                    </div>
                </div>
                <div class="flex-a-c" style="margin-top: 1.3125rem;justify-content: flex-end;">
                    <div class="merchant-item-btn" style="margin-right: .6563rem;"
                        @click="link('finger_shopping_payee_qr_code', item)">查看收款码</div>
                    <div class="merchant-item-btn" @click="link('finger_shopping_examine', item)">考核情况</div>
                </div>
            </div>
        </div>
        <div v-if="active1 == 1" class="earnings-list">
            <div>
                <van-tabs v-model="status_active" line-width=".9375rem" line-height=".125rem" @click="status_handle">
                    <van-tab v-for="item in status_list" :key="item.title" :title="item.title"></van-tab>
                </van-tabs>
                <div class="earnings-list-box" v-if="group_list && group_list.length !== 0">
                    <div v-for="(item, index) in group_list" class="earnings-list-status-item">
                        <div class="flex-j-sb" @click="handle_month(item, index)" style="margin-bottom: 1rem;">
                            <div style="font-weight: 500;font-size: .875rem;color: #00001C;">{{ item.time }}</div>
                            <div style="font-size: .875rem;color: #F15353;font-weight: 400;">¥{{ item.amount }}<i
                                    :class="index !== current_index ? 'iconfont icon-icon_down1' : 'iconfont icon-icon_up1'"></i>
                            </div>
                        </div>
                        <div class="line" style="margin:0;"></div>
                        <div v-if="index == current_index" class="earnings-details">
                            <div class="area-more" v-if="month_data && month_data.length !== 0">
                                <template v-for="(c_item, c_index) in month_data">
                                    <div class="flex-j-sb lh-1" style="margin-bottom:.625rem;margin-top: .625rem;">
                                        <div style="font-weight: 500;font-size: .8125rem;color: #00001C;">
                                            {{ c_item.order_sn }}
                                        </div>
                                        <div style="font-size: .8125rem;color: #00001C;font-weight: 400;">¥{{
                                            c_item.reward_amount }}
                                        </div>
                                    </div>
                                    <div class="flex-j-sb lh-1">
                                        <div style="font-weight: 500;font-size: .75rem;color: #6E6E79;">
                                            时间：{{ c_item.created_at }}
                                        </div>
                                        <div style="font-size: .75rem;color: #6E6E79;font-weight: 400;">
                                            {{ c_item.status_name }}</div>
                                    </div>
                                    <div v-if="c_index + 1 !== month_data.length" class="earnings-details-line"></div>
                                </template>
                            </div>
                            <div v-else>未查询到流水记录</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        list: {
            default: () => ([]),
            type: Array
        }
    },
    data() {
        return {
            group_list:[],
            month_data:[],
            current_index: null,
            active1: 0,
            status_list: [
                { title: '全部' },
                { title: '已结算' },
                { title: '未结算' },
                { title: '已失效' }
            ],
            status_active: 0, isLoadMore: true,
            page: 1,
            last_page: 1,
            current_month_item: "",

        };
    },

    methods: {
        observeAreaRoot() {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.addEventListener('scroll', this.handleScroll);
                    } else {
                        entry.target.removeEventListener('scroll', this.handleScroll);
                    }
                });
            });
            observer.observe(document.getElementsByClassName('area-more')[0]);
        },
        handleScroll(event) {
            const scrollTop = event.target.scrollTop;
            const clientHeight = event.target.clientHeight;
            const scrollHeight = event.target.scrollHeight;
            if (scrollTop + clientHeight >= scrollHeight - 10 && this.isLoadMore) { // 10 is a threshold value
                this.isLoadMore = false;
                if (this.page >= this.last_page) {
                    return;
                }
                let page = this.page + 1
                this.get_month(page);
            }
        },

        get_month(page = 1) {
            let json = { agent_id: this.agent_id, page, month: this.current_month_item };
            if (this.status_active == 1) {
                json.is_settle = 1
            } else if (this.status_active == 2) {
                json.is_settle = 0
            } else if (this.status_active == 3) {
                json.is_settle = 2;
            }
            $http.post('plugin.zhixianggou.api.merchant.reward-list', json, '.').then(res => {
                this.isLoadMore = true;
                if (res.result) {
                    this.month_data = page == 1 ? res.data.data : this.month_data.concat(res.data.data);
                    this.page = res.data.current_page;
                    this.last_page = res.data.last_page;
                    this.$nextTick(() => {
                        this.observeAreaRoot();
                    })
                } else {
                    this.$toast(res.msg);
                }
            })
        },
        handle_month(data, index) {
            if (this.current_index == index) {
                this.current_index = null;
                return;
            }
            this.current_index = index;
            this.current_month_item = data.time;

            this.get_month()

        },
        link(url, item) {
            let json = {}
            if (url == 'finger_shopping_payee_qr_code') {
                if(item.active==0) return;
                json.store_id = item.id;
            } else if (url == 'finger_shopping_examine') {
                if(item.active==0) return;
                json = {
                 store_id: item.id
                }

            }
            this.$router.push(this.fun.getUrl(url, json))
        }, tabs_handle() {
            this.list=[];
            if (this.active1 == 1) {
                this.get_group()
            } else {
                this.$emit('get_list', { index: this.active1 })
            }

        }, status_handle() {
            this.current_index = null;
            let json = { }
            if (this.status_active == 1) {
                json.is_settle = 1 + '';
            } else if (this.status_active == 2) {
                json.is_settle = 0 + '';
            } else if (this.status_active == 3) {
                json.is_settle = 2 + '';
            }
            this.get_group(json)
        },
        get_group(json={}) {
            $http.post("plugin.zhixianggou.api.merchant.reward-group", json, '.').then(res => {
                if (res.result) {
                    this.group_list = res.data;
                } else {
                    this.$toast(res.msg);
                }
            })
        },
    }
};
</script>

<style scoped lang='scss'>
.second-tabs ::v-deep .van-tabs__nav {
    background-color: transparent;
}
.active-class{
    img{
        display: block;
    }
    .img-div{
        position: relative;
        &::after{
            position: absolute;
            content:'';
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color:#fff;
            opacity: .6;border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
            z-index: 10;
        }
    }
    .merchant-item-btn{
        border:1px solid #D6D6DC !important;
    }
    div{
        color:#999999 !important;
    }
    span{
        color:#999999 !important;
    }
}
.area-more {
    max-height: 18.75rem;
    overflow-y: scroll;
}

.second-tabs ::v-deep .van-tabs__line {
    bottom: 24px;
}

.earnings-list ::v-deep .van-tabs__nav {
    background-color: #fff !important;
}



.earnings-list ::v-deep .van-tabs {
    border-radius: .5rem;
    overflow: hidden;
}


.earnings-list ::v-deep .van-tabs {
    border-radius: .5rem;
    overflow: hidden;
}

.lh-1 {
    line-height: 1;
}

.earnings-list {
    margin-top: .5313rem;
    padding: 0 .75rem 7.0313rem;

    .earnings-list-status-item {
        padding: 1.125rem .9375rem 0;

    }



    .earnings-list-box {
        margin-top: .625rem;
        background-color: #fff;
        border-radius: .5rem;

    }

    .earnings-details {
        background-color: #FAFAFA;
        padding: .9375rem 1.125rem .9688rem .7188rem;
    }

    .earnings-details-line {
        margin: .6563rem 0;
        height: 1px;
        background-color: #F0F0F1;
    }



    .earnings-list-box {
        margin-top: .625rem;
        background-color: #fff;
        border-radius: .5rem;
        padding-bottom: 1.125rem;

    }

    .earnings-list-status-item {
        padding: 1.125rem .9375rem 0;

    }

    .icon-icon_down1,
    .icon-icon_up1 {
        color: #AAAAB3;
        margin-left: .6875rem;
    }

}

.lh-1 {
    line-height: 1;
}



.list {
    padding: 0 .75rem 7.0313rem;

    .line {
        height: 1px;
        background: #F0F0F1;
        margin: .75rem .1563rem 1.0625rem;

    }

    .merchant-item-btn {
        width: 5.625rem;
        height: 2rem;
        background: #FFFFFF;
        border-radius: 2rem 2rem 2rem 2rem;
        border: .0313rem solid var(--themeBaseColor);
        line-height: 2rem;
        text-align: center;
        cursor: pointer;
        color: var(--themeBaseColor);
    }

    .price {
        font-size: .9375rem;
        line-height: 1;
        color: #00001C;
        font-weight: bold;
    }

    .tips {
        font-size: .75rem;
        color: #6E6E79;
        line-height: 1;
        margin-top: .4375rem;
    }

    .line {
        height: 1px;
        background: #F0F0F1;
        margin: .75rem .1563rem 1.0625rem;

    }

    .merchant-item {
        padding: .75rem .75rem .9375rem;
        border-radius: .5rem;
        background-color: #fff;
        margin-bottom: .625rem;

        .merchant-item-name {
            font-weight: bold;
            font-size: .9375rem;
            color: #00001C;


        }

        .create-time {
            font-weight: 400;
            font-size: .75rem;
            color: #999999;
            line-height: 1;
        }

        .icon-dizhi1 {
            font-size: .625rem;
            margin-right: .1563rem;
        }

        .address {
            font-weight: normal;
            font-size: .75rem;
            color: #999999;
            margin-top: .6875rem;
            text-align: left;
        }

        img {
            width: 3rem;
            height: 3rem;
            border-radius: .625rem .625rem .625rem .625rem;
            margin: 0;
        }
    }

}
</style>